<template>
  <div class="collection-init">
    <div class="collection-title">
      <h1>收藏</h1>
      <h5>有路的地方就有大白</h5>
    </div>
    <div class="collection-init-box">
      <img src="https://img.yzcdn.cn/vant/cat.jpeg" alt="">
      <p>您还没有收藏的爱车</p>
      <p>快去车库看看吧</p>
      <div class="search-vehicle" @click="seekLoveVehicle">寻找爱车</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'collectionInit',
  data() {
    return {

    }
  },
  methods: {
    seekLoveVehicle() {
      setTimeout(() => {
        this.$router.push('/msite');
      }, 200);
    }
  }
}
</script>

<style lang="scss" scoped>
.collection-init {
  padding: 10px;
  box-sizing: border-box;
  .collection-title {
    h1 {
      font-size: 24px;
    }
    h5 {
      font-size: 14px;
      font-weight: 400;
    }
  }
  .collection-init-box {
    width: 100%;
    height: 100%;
    text-align: center;
    img {
      width: $height*2;
      height: $height*2;
      margin-top: $height*4;
      margin-bottom: 10px;
    }
    p {
      &:nth-of-type(2) {
        margin: 10px 0;
      }
    }
    .search-vehicle {
      width: 200px;
      height: $height;
      line-height: $height;
      border-radius: 20px;
      background-color: $color;
      color: #fff;
      margin: 30px auto;
    }
  }
}
</style>